<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
          <div style="border:1px solid #eee;min-height:calc(100vh - 150px);padding:20px 10px;min-width:200px">
              <div style="overflow: hidden">
                <el-button
                  v-if="isCanAddDept"
                  size="mini"
                  type="primary"
                  class="btn-add"
                  @click="showDepartment('add')"
                  style="float:right">
                  新增部门
                </el-button>
              </div>
            <div style="margin-top:20px" v-loading="dataLoading">
              <el-tree
                :highlight-current="true"
                @node-click="nodeClick"
                :data="data"
                node-key="id"
                default-expand-all
                :props="props"
                :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }} ({{data.userNum}}人)</span>
                <span>
                  <el-button
                    v-if="isCanEditDept"
                    type="text"
                    size="mini"
                    @click.stop.native="showDepartment('edit',data)">
                    修改
                  </el-button>
                  <el-button
                    v-if="isCanDeleteDept"
                    type="text"
                    size="mini"
                    @click.stop.native="remove(data)">
                    删除
                  </el-button>
                </span>
              </span>
              </el-tree>
            </div>
          </div>
      </el-col>
      <el-col :span="19">
          <div style="border:1px solid #eee;min-height: calc(100vh - 150px);padding:20px">
            <div style="overflow:hidden;">
              <!--搜索-->
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px" style="float:right">

                <el-form-item label="输入搜索：">
                  <el-input v-model="listQuery.keyword" placeholder="员工姓名/联系手机号" style="width:250px"></el-input>
                </el-form-item>
                  <el-form-item label="员工类型：">
                      <el-select v-model="listQuery.isDepartManage" clearable>
                          <el-option :value="0" label="员工"></el-option>
                          <el-option :value="1" label="一级主管"></el-option>
                          <el-option :value="2" label="二级主管"></el-option>
                      </el-select>
                  </el-form-item>
                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
              <el-button
                size="mini"
                type="primary"
                class="btn-add"
                style="float:left;"
                v-if="isCanAddStaff"
                @click="showDialog('add',null)">
                新增员工
              </el-button>
            </div>
            <el-table ref="productTable"
                      :data="list"
                      style="width: 100%;font-size: 12px;"
                      v-loading="listLoading"
                      border>
              <el-table-column label="ID" align="center" min-width="50">
                <template slot-scope="scope">{{scope.row.userId}}</template>
              </el-table-column>
              <el-table-column label="员工姓名"  align="center" min-width="100">
                <template slot-scope="scope"><span :style="{color:scope.row.status == 2 ? 'red' : '#606266'}">{{scope.row.realName}}</span></template>
              </el-table-column>
              <el-table-column label="员工类型"  align="center" min-width="100">
                <template slot-scope="scope">{{scope.row.isDepartManage | fifisDepartManage}}</template>
              </el-table-column>
              <el-table-column label="手机号"  align="center" min-width="150">
                <template slot-scope="scope">{{scope.row.mobile}}</template>
              </el-table-column>
              <el-table-column label="部门"  align="center" min-width="100">
                <template slot-scope="scope">{{scope.row.departmentName}}</template>
              </el-table-column>
              <el-table-column label="职位"  align="center" min-width="100">
                <template slot-scope="scope">{{scope.row.position}}</template>
              </el-table-column>
              <el-table-column label="角色"  align="center" min-width="100">
                <template slot-scope="scope">{{scope.row.roleName}}</template>
              </el-table-column>
              <el-table-column label="企业微信"  align="center" min-width="100">
                <template slot-scope="scope">{{scope.row.wechatUserId}}</template>
              </el-table-column>
<!--              <el-table-column label="采购产品权限"  align="center" min-width="100">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button type="text" @click="showProductLine(scope.row)">编辑</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="排序"  align="center" min-width="50">
                <template slot-scope="scope">{{scope.row.sortValue}}</template>
              </el-table-column>
              <el-table-column label="最近登录日期"  align="center" min-width="180">
                <template slot-scope="scope">{{scope.row.lastedAt}}</template>
              </el-table-column>
              <el-table-column label="操作"  align="center" min-width="150">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.roleName != '超级管理员' && isCanEditStaff"
                    type="text" @click="showDialog('edit',scope.row)">
                    编辑
                  </el-button>
                  <el-button
                          v-if="scope.row.roleName != '超级管理员' && isCanEditStaff"
                          type="text" @click="showForm5(scope.row)">
                    排序
                  </el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.roleName != '超级管理员' && isCanQuitStaff"
                    @click="showQuit(scope.row)">
                    离职
                  </el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.wechatUserId == ''"
                    @click="showBindqw(scope.row)">
                    绑定企业微信
                  </el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.wechatUserId != ''"
                    @click="showBindqw(scope.row)">
                    解绑企业微信
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20]"
                :current-page.sync="listQuery.pageNum"
                :total="total">
              </el-pagination>
            </div>
          </div>

      </el-col>
    </el-row>


    <!--编辑员工-->
    <el-dialog
            :close-on-click-modal="false"
      :title="title2"
      :beforeClose="beforeClose2"
      :visible.sync="dialogVisible2"
      width="600px">
      <div style="max-height:500px;overflow: auto">
        <el-form :model="employForm" size="mini" label-width="120px" :rules="rules" ref="employForm">
          <el-form-item label="员工姓名：" prop="realName">
            <el-input v-model="employForm.realName" placeholder="员工姓名" :disabled="title2 == '编辑员工'"></el-input>
          </el-form-item>
          <el-form-item label="联系手机号：" prop="mobile">
            <el-input v-model="employForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="部门：" prop="departmentId">
            <el-cascader
                    v-model="employForm.departmentId"
                    :options="data2"
                    :props="{ checkStrictly: true,value:'departmentId',label:'departmentName',emitPath:false}"
                    clearable>
            </el-cascader>
          </el-form-item>
          <el-form-item label="角色：" prop="roleId">
            <el-select v-model="employForm.roleId" placeholder="请选择">
              <el-option
                      v-for="item in options"
                      :key="item.roleId"
                      :label="item.roleName"
                      :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位：" prop="position">
            <el-input v-model="employForm.position" placeholder="职位"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="employForm.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否可外网登录：" prop="isCanOuterVisit">
            <el-radio-group v-model="employForm.isCanOuterVisit">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--        <el-form-item label="产品线：">-->
          <!--          <el-checkbox-group v-model="employForm.goodsLineIds">-->
          <!--            <el-checkbox :label="item.goodsLineId+''" v-for="item in productLineList" :key="item.goodsLineId">{{item.goodsLineValue}}</el-checkbox>-->
          <!--          </el-checkbox-group>-->
          <!--        </el-form-item>-->
          <el-form-item label="采购数据权限：">
            <el-radio-group v-model="employForm.purchaseAllGoodsClass">
              <el-radio :label="1">全部产品权限</el-radio>
              <el-radio :label="0">部分产品权限</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="产品线：" v-if="employForm.purchaseAllGoodsClass==0" prop="purchaseGoodsClasses">
            <el-select v-model="employForm.purchaseGoodsClasses" placeholder="请选择" multiple style="width:100%">
              <el-option
                      v-for="item in options3"
                      :key="item"
                      :label="item"
                      :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品牌号：" v-if="employForm.purchaseAllGoodsClass==0" prop="purchaseGoodsSn">
            <el-select
                    style="width:100%"
                    multiple
                    @change="changekingId"
                    clearable
                    v-model="employForm.purchaseGoodsSn"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading">
              <el-option
                      v-for="item in options2"
                      :key="item.goodsSn"
                      :label="item.goodsSn"
                      :value="item.goodsSn">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="员工类型：">
            <el-radio-group v-model="employForm.isDepartManage">
              <el-radio :label="0">员工</el-radio>
              <el-radio :label="1">一级主管</el-radio>
              <el-radio :label="2">二级主管</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="师傅：">
            <el-select v-model="employForm.masterId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提成分类：">
            <el-select v-model="employForm.commissionType" filterable placeholder="请选择" clearable>
              <el-option :key="1" label="尼龙" value="尼龙"></el-option>
              <el-option :key="2" label="其它" value="其它"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="销售负责产品线：" >
            <el-select v-model="employForm.saleGoodsLineIds" placeholder="请选择" multiple style="width:100%">
              <el-option
                v-for="item in productLineList"
                :key="item.goodsLineId"
                :label="item.goodsLineValue"
                :value="item.goodsLineId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售管理产品线：">
            <el-select v-model="employForm.manageGoodsLineIds" placeholder="请选择" multiple style="width:100%">
              <el-option
                v-for="item in productLineList"
                :key="item.goodsLineId"
                :label="item.goodsLineValue"
                :value="item.goodsLineId">
              </el-option>
            </el-select>
          </el-form-item>


          <!--          <el-form-item label="上级：" >-->
<!--            <el-button type="text" @click="showChooseRQ(1)">选择</el-button>-->
<!--            <div style="padding:12px;background: #fff;border:1px solid #DCDFE6;border-radius: 4px;max-height:100px;overflow: auto" v-show="employForm.tags.length > 0">-->
<!--              <el-tag-->
<!--                      style="margin-bottom:8px;margin-right:8px"-->
<!--                      v-for="(tag,index) in employForm.tags"-->
<!--                      :key="tag.id"-->
<!--                      @close="closeTag(index,1)"-->
<!--                      closable-->
<!--                      type="success">-->
<!--                {{tag.name}}-->
<!--              </el-tag>-->
<!--            </div>-->
<!--            <el-input v-model="employForm.userIdsText" type="hidden" style="height:0"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="部门人员：" >-->
<!--            <el-button type="text" @click="showChooseRQ(2)">选择</el-button>-->
<!--            <div style="padding:12px;background: #fff;border:1px solid #DCDFE6;border-radius: 4px;max-height:100px;overflow: auto" v-show="employForm.tags2.length > 0">-->
<!--              <el-tag-->
<!--                      style="margin-bottom:8px;margin-right:8px"-->
<!--                      v-for="(tag,index) in employForm.tags2"-->
<!--                      :key="tag.id"-->
<!--                      @close="closeTag(index,2)"-->
<!--                      closable-->
<!--                      type="success">-->
<!--                {{tag.name}}-->
<!--              </el-tag>-->
<!--            </div>-->
<!--            <el-input v-model="employForm.userIdsText2" type="hidden" style="height:0"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="关联部门人员：" >-->
<!--            <el-button type="text" @click="showChooseRQ(3)">选择</el-button>-->
<!--            <div style="padding:12px;background: #fff;border:1px solid #DCDFE6;border-radius: 4px;max-height:100px;overflow: auto" v-show="employForm.tags3.length > 0">-->
<!--              <el-tag-->
<!--                      style="margin-bottom:8px;margin-right:8px"-->
<!--                      v-for="(tag,index) in employForm.tags3"-->
<!--                      :key="tag.id"-->
<!--                      @close="closeTag(index,3)"-->
<!--                      closable-->
<!--                      type="success">-->
<!--                {{tag.name}}-->
<!--              </el-tag>-->
<!--            </div>-->
<!--            <el-input v-model="employForm.userIdsText3" type="hidden" style="height:0"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="关联部门负责人：" >-->
<!--            <el-button type="text" @click="showChooseRQ(4)">选择</el-button>-->
<!--            <div style="padding:12px;background: #fff;border:1px solid #DCDFE6;border-radius: 4px;max-height:100px;overflow: auto" v-show="employForm.tags4.length > 0">-->
<!--              <el-tag-->
<!--                      style="margin-bottom:8px;margin-right:8px"-->
<!--                      v-for="(tag,index) in employForm.tags4"-->
<!--                      :key="tag.id"-->
<!--                      @close="closeTag(index,4)"-->
<!--                      closable-->
<!--                      type="success">-->
<!--                {{tag.name}}-->
<!--              </el-tag>-->
<!--            </div>-->
<!--            <el-input v-model="employForm.userIdsText4" type="hidden" style="height:0"></el-input>-->
<!--          </el-form-item>-->

        </el-form>
      </div>


      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增/编辑部门-->
    <el-dialog
            :close-on-click-modal="false"
      :title="title"
      :beforeClose="beforeClose"
      :visible.sync="dialogVisible"
      width="420px">
      <el-form :model="departmentForm" size="mini" label-width="120px" :rules="rules2" ref="departmentForm">
        <el-form-item label="部门名称：" prop="departmentName">
          <el-input v-model="departmentForm.departmentName" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item label="父级：">
          <el-cascader
            v-model="departmentForm.parentId"
            :options="data2"
            :props="{ checkStrictly: true,value:'departmentId',label:'departmentName',emitPath:false}"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-select v-model="departmentForm.manageUserId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.realName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" prop="sortIndex">
          <el-input v-model="departmentForm.sortIndex" style="width:100px"></el-input>
        </el-form-item>
        <el-form-item label="评价负责人：">
          <el-select v-model="departmentForm.majorUserIds" filterable placeholder="请选择" clearable multiple >
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId + ''"
                    :label="item.realName"
                    :value="item.userId + ''">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联部门：" >
          <el-cascader
                  v-model="departmentForm.relationDepartmentIds"
                  :options="data"
                  :props="{ multiple: true, checkStrictly: true,value:'departmentId',label:'departmentName',emitPath:false }"
                  clearable></el-cascader>

        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>


    <!--员工离职-->
    <el-dialog
            :close-on-click-modal="false"
      title="员工离职"
      :visible.sync="dialogVisible3"
      width="420px">
      <div style="padding-bottom:20px">确认将此员工离职？</div>
<!--      <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm">-->
<!--        <el-form-item label=" 客户信息转移到：">-->
<!--          <el-select v-model="quitForm.target" filterable placeholder="请选择">-->
<!--            <el-option-->
<!--            :key="0"-->
<!--            label="公海"-->
<!--            :value="0">-->
<!--            </el-option>-->
<!--            <el-option-->
<!--              v-for="item in list2"-->
<!--              :key="item.userId"-->
<!--              :label="item.realName"-->
<!--              :value="item.userId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
      </span>
    </el-dialog>

    <!--选择适用人群--->
    <el-dialog
            :close-on-click-modal="false"
            title="选择人员"
            :beforeClose="handleClose4"
            :visible.sync="dialogVisible4"
            width="600px">
      <el-row :gutter="20">
        <el-col :span="12" style="max-height:400px;overflow: auto">
          <el-tree
                  @check="nodeClick4"
                  :data="data4"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  highlight-current
                  :props="defaultProps">
          </el-tree>
        </el-col>
        <el-col :span="12">
          <div style="border-left:1px solid rgb(220, 223, 230);height: 400px;overflow: auto;padding-left:20px">
            <el-alert
                    :key="item.id"
                    v-for="(item,index) in needNodes"
                    style="margin-bottom:10px"
                    :title="item.name"
                    @close="closeRQitem(index)"
                    type="success">
            </el-alert>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose4">取 消</el-button>
              <el-button type="primary" @click="handleConfirm4">确 定</el-button>
          </span>
    </el-dialog>


    <!--修改排序-->
    <el-dialog
            :close-on-click-modal="false"
            title="修改排序"
            :visible.sync="dialogVisible5"
            width="300px">
            <el-form :model="form5" size="mini" label-width="80px" ref="form5" rules="rules5">
              <el-form-item label="排序：" prop="sortValue">
                <el-input-number v-model="form5.sortValue" :controls="false" :precision="0" class="inputleft" ></el-input-number>
              </el-form-item>
            </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose5">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改产品线-->
    <el-dialog
      :close-on-click-modal="false"
      title="采购产品权限设置"
      :visible.sync="dialogVisible6"
      width="700px">
      <el-form :model="form5" size="mini" label-width="100px" ref="form5" rules="rules5">
        <el-form-item label="权限开关：">
            <el-radio-group>
                <el-radio>无权限</el-radio>
                <el-radio>有权限</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="产品线权限：">
          <el-radio-group>
            <el-radio>无</el-radio>
            <el-radio>全部</el-radio>
            <el-radio>部分</el-radio>
          </el-radio-group>
          <el-select multiple placeholder="请选择"></el-select>
        </el-form-item>
        <el-form-item label="产品权限：">
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%" class="table-product-line">
                <tr>
                   <td style="width:100px;text-align: center">PA6</td>
                   <td style="padding-left:20px">
                     <el-radio-group>
                       <el-radio>无</el-radio>
                       <el-radio>全部</el-radio>
                       <el-radio>部分</el-radio>
                     </el-radio-group>
                     <el-select multiple placeholder="请选择"></el-select>
                   </td>
                </tr>
                <tr>
                  <td style="width:100px;text-align: center">PA66</td>
                  <td style="padding-left:20px">
                    <el-radio-group>
                      <el-radio>无</el-radio>
                      <el-radio>全部</el-radio>
                      <el-radio>部分</el-radio>
                    </el-radio-group>
                    <el-select multiple placeholder="请选择"></el-select>
                  </td>
                </tr>
              <tr>
                <td style="width:100px;text-align: center">PA66</td>
                <td style="padding-left:20px">
                  <el-radio-group>
                    <el-radio>无</el-radio>
                    <el-radio>全部</el-radio>
                    <el-radio>部分</el-radio>
                  </el-radio-group>
                  <el-select multiple placeholder="请选择"></el-select>
                </td>
              </tr>
            </table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose6">取 消</el-button>
          <el-button type="primary" @click="handleConfirm6" :loading="btnLoading6">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改企业微信-->
    <el-dialog
      :close-on-click-modal="false"
      title="企业微信设置"
      :visible.sync="dialogVisible7"
      width="400px">
      <el-form :model="form7" size="mini" label-width="100px" ref="form7">
        <el-form-item label="企业微信：">
            <el-input v-model="form7.wechat"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose7">取 消</el-button>
          <el-button type="primary" @click="handleConfirm7" :loading="btnLoading7">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
  import {getStaffsList,postStaffsEdit,getRoleList,delSellerItem,getDeptList,saveDept,delDept,changeUserInfo} from '@/api/management'
  import {goodsList,getCrmGoodsClass,bindingUrl,relieveWechat} from '@/api/company'
  import {getUserOption,goodsLineList,listByDept} from '@/api/partner'
  import {validatePhone,validateInt} from '@/utils/validate';
  import store from '@/store'
  const defaultListQuery = {
    keyword:null,
    isDepartManage:'',
    pageNum: 1,
    pageSize: 10,
  };
  const defaultEmployForm = {
    realName:null,
    roleId:null,
    mobile:null,
    departmentId:null,
    position:"",
    gender:1,
    goodsLineIds:[],
    purchaseGoodsSn:[],
    purchaseGoodsClasses:[],
    purchaseAllGoodsClass:null,
    tags:[],
    userIdsText:'',
    tags2:[],
    userIdsText2:'',
    tags3:[],
    userIdsText3:'',
    tags4:[],
    userIdsText4:'',
    isDepartManage:0,
    isCanOuterVisit:0,
    masterId:'',
    commissionType:'',
    manageGoodsLineIds:[],
    saleGoodsLineIds:[]

  };
  const defaultDepartmentForm = {
      departmentName:'',
      parentId:'',
      sortIndex:0,
      manageUserId:'',
      majorUserIds:[],
      relationDepartmentIds:[],
  };
  const defaultForm7 = {
    userId:'',
    wechat:'',
  };
  export default {
    name: "employeeSetting",
    data(){
      const isvalidatePhone = (rule, value, callback) => {
        if(!validatePhone(value)){
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      };
      const isValidateInt = (rule, value, callback) => {
          if (!validateInt(value)) {
              callback(new Error('请输入正整数'))
          } else {
              callback()
          }
      };
      const isvalidatepurchaseGoodsClasses = (rule, value, callback) => {
        if (this.employForm.purchaseAllGoodsClass == 0 && this.employForm.purchaseGoodsClasses.length == 0 &&  this.employForm.purchaseGoodsSn.length == 0) {
          callback(new Error('请选择产品线或牌号'))
        } else {
          callback()
        }
      };
      return{
        data : [],
        data2:[],
        props: {
            label: 'departmentName',
            children: 'children'
        },
        title:'',
        title2:'',
        dialogVisible:false,
        listQuery: Object.assign({}, defaultListQuery),
        list:[],
        listLoading: false,
        total:null,
        dialogVisible2:false,
        employForm: Object.assign({}, defaultEmployForm),
        departmentForm:JSON.parse(JSON.stringify(defaultDepartmentForm)),
        rules2:{
            departmentName:[{required: true, message: '请输入部门名称', trigger: 'blur'},],
            sortIndex:[{ required: true, trigger: 'blur' ,validator: isValidateInt}]
        },
        isEdit2:false,
        curtDepartment:{},
        rules: {
          realName: [
            {required: true, message: '请输入员工姓名', trigger: 'blur'},
          ],
          mobile:[
            {required: true, validator:isvalidatePhone, trigger: 'blur'},
          ],
          roleId:[
              {required: true, message: '请选择角色',trigger: 'change'},
          ],
          departmentId:[
            {required: true, message: '请选择部门',trigger: 'change'},
          ],
          position:[
              {required: true,message: '请输入职位',trigger: 'blur'}
          ],
          purchaseGoodsClasses:[{required: true, validator:isvalidatepurchaseGoodsClasses,trigger: 'change'},],
          purchaseGoodsSn:[{required: true, validator:isvalidatepurchaseGoodsClasses,trigger: 'change'},],
          userIdsText:[{required: true, trigger: 'change' ,message: '请选择上级'}],
          userIdsText2:[{required: true, trigger: 'change' ,message: '请选择部门人员'}],
          userIdsText3:[{required: true, trigger: 'change' ,message: '请选择关联部门人员'}],
          userIdsText4:[{required: true, trigger: 'change' ,message: '请选择关联部门负责人'}],
          isCanOuterVisit:[{required: true, trigger: 'change' ,message: '此项必填'}]
        },
        options: [],
        isEdit:true,
        dialogVisible3:false,
        quitForm:{
            target:0,
            userId:'',
        },
        list2:[],
        btnLoading:false,
        btnLoading2:false,
        btnLoading3:false,
        dataLoading:false,
        roles:store.getters.roles ? store.getters.roles : [],
        userOptionList:[],
        productLineList:[],
        loading:false,
        options2:[],
        options3:[],
        dialogVisible4:false,
        needNodes:[],
        popType:null,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        data4:[],
        dialogVisible5:false,
        form5:{
          sortValue:0,
          userId:'',
        },
        btnLoading5:false,
        rules5:{
          sortValue: [
            {required: true, message: '请输入排序', trigger: 'blur'},
          ],
        },
        dialogVisible6:false,
        btnLoading6:false,

        dialogVisible7:false,
        btnLoading7:false,
        form7:Object.assign({}, defaultForm7),
      }
    },
    created() {
      this.getRoleData();
      this.getList();
      this.getBuMenList();
      this.getUserOptionList();
      this.getGoodsLineList();
      this.getOptions3();
      this.getDataList();
    },
    computed: {
        isCanAddDept() {
            if(this.roles.indexOf("addDept") != -1){
                return true
            }else{
                return false
            }
        },
        isCanEditDept(){
            if(this.roles.indexOf("editDept") != -1){
                return true
            }else{
                return false
            }
        },
        isCanDeleteDept(){
            if(this.roles.indexOf("deleteDept") != -1){
                return true
            }else{
                return false
            }
        },
        isCanAddStaff(){
            if(this.roles.indexOf("addStaff") != -1){
                return true
            }else{
                return false
            }
        },
        isCanEditStaff(){
            if(this.roles.indexOf("editStaff") != -1){
                return true
            }else{
                return false
            }
        },
        isCanQuitStaff(){
            if(this.roles.indexOf("quitStaff") != -1){
                return true
            }else{
                return false
            }
        },
    },

    filters: {
      enabledFilter(value) {
        if (value === 1) {
          return '启用';
        } else if (value === 0) {
          return '禁用';
        }
      },
      fifisDepartManage(value){
          if (value === 0) {
              return '员工';
          } else if (value === 1) {
              return '一级主管';
          }else if (value === 2) {
              return '二级主管';
          }
      },
    },

    methods:{
      showBindqw(item){
        this.dialogVisible7 = true;
        this.form7 = JSON.parse(JSON.stringify(defaultForm7));
        this.form7.userId = item.userId;
        this.form7.wechat = item.wechatUserId;

      },
      handleClose7(){
        this.dialogVisible7 = false;

      },
      handleConfirm7(){
        this.btnLoading7 = true;
        bindingUrl(this.form7).then((res)=>{
          this.getList();
          this.handleClose7()
          this.btnLoading7 = false
        }).catch(()=>{
          this.btnLoading7 = false
        })
      },


      // unbindqw(item){
      //   relieveWechat({userId:item.userId}).then((res)=>{
      //     this.getList()
      //   })
      // },

      //关闭产品线编辑
      handleClose6(){

      },

      //确认产品线编辑
      handleConfirm6(){

      },

      //显示产品线编辑
      showProductLine(row){
         this.dialogVisible6 = true
      },

      //显示修改排序弹窗
      showForm5(item){
        this.dialogVisible5 = true;
        this.form5.userId = item.userId;
        this.form5.sortValue = item.sortValue;
      },

      //关闭修改排序弹窗
      handleClose5(){
        this.dialogVisible5 = false;
        this.form5.sortValue = 0;
        this.form5.userId = ''
      },

      //确认修改排序
      handleConfirm5(){
        this.$refs.form5.validate((valid) => {
          if (valid) {
            this.btnLoading5 = true;
            changeUserInfo(this.form5).then(()=>{
              this.btnLoading5 = false;
              this.handleClose5();
              this.getList();
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }).catch(()=>{
              this.btnLoading5 = false;
            })
          }
        })

      },


      //获取员工下拉选项
      getDataList(){
        listByDept().then((res)=>{
          this.data4 = res;
        })
      },


      //获取采购产品线
      getOptions3(){
        getCrmGoodsClass().then((res)=>{
          this.options3 = res
        })
      },
      //切换搜索商品
      changekingId(val){

      },

      //商品牌号
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          goodsList({keywords:query}).then((res)=>{
            this.options2 = res.list;
            this.loading = false;
          })
        } else {
          this.options = [];
          this.loading = false;
        }
      },
      //获取产品线选项列表
      getGoodsLineList(){
        goodsLineList().then((res)=>{
          this.productLineList = res;
        })
      },
      //获取员工下拉选项
      getUserOptionList(){
        getUserOption({status:1}).then((res)=>{
          this.userOptionList = res;
        })
      },
        //部门树结构点击时
        nodeClick(data){
            this.listQuery.pageNum = 1;
            this.listQuery.keyword = '';
            this.listQuery.isDepartManage = '';
            this.listQuery.departmentId = data.departmentId;
            this.getList()
        },
        //去除不要的children
        forTree(list){
            let newList = list;
            if(newList.length){
                for (let i = 0; i<newList.length; i++){
                    if(newList[i].children && newList[i].children.length > 0){
                        this.forTree(newList[i].children)
                    }else{
                        delete newList[i].children;
                    }
                }
                return newList
            }
        },

        //获取部门列表
        getBuMenList(){
            this.dataLoading = true;
            getDeptList().then((res)=>{
                this.data = res;
                this.data2 = [];
                this.data2 = this.forTree(this.data);
                this.dataLoading = false;

            })
        },

        //显示新增部门
        showDepartment(type,item){
            this.title = type == 'add' ? '新增部门' : '编辑部门';
            this.isEdit2 = type != 'add';
            if(this.isEdit2){
                this.departmentForm.departmentName = item.departmentName;
                this.departmentForm.parentId = item.parentId;
                this.departmentForm.sortIndex = item.sortIndex;
                this.departmentForm.departmentId = item.departmentId;
                this.departmentForm.manageUserId = item.manageUserId;
                this.departmentForm.majorUserIds = item.majorUserIds != '' ? item.majorUserIds.split(",") : [];
                this.departmentForm.relationDepartmentIds = item.relationDepartmentIds != '' ? item.relationDepartmentIds.split(",") : [];
                console.log("this.departmentForm",this.departmentForm)
            }else{
                this.departmentForm = JSON.parse(JSON.stringify(defaultDepartmentForm));
            }
            this.dialogVisible = true;
        },
        //关闭部门弹窗之前
        beforeClose(){
            this.dialogVisible = false;
            this.$refs.departmentForm.clearValidate();
        },
        //关闭部门弹窗
        handleClose(){
            this.dialogVisible = false;
            this.$refs.departmentForm.clearValidate();
        },
        //新增部门
        handleConfirm(type,row){
            this.$refs.departmentForm.validate((valid) => {
                if (valid) {
                    this.btnLoading = true;
                    let data = JSON.parse(JSON.stringify(this.departmentForm));
                    data.parentId = data.parentId == '' ? 0 : data.parentId;
                    data.majorUserIds = this.departmentForm.majorUserIds.join(",");
                    data.relationDepartmentIds = this.departmentForm.relationDepartmentIds.join(",");
                    saveDept(data).then(response=>{
                        this.dialogVisible = false;
                        this.$refs.departmentForm.resetFields();
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration:1000
                        });
                        this.btnLoading = false;
                        this.getBuMenList()
                    }).catch(()=>{
                        this.btnLoading = false;
                    })
                }
            });
        },
        //删除部门
        remove(data){
            this.$confirm('确定删除部门?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDept({departmentId:data.departmentId}).then(()=>{
                    this.getBuMenList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //获取角色列表
        getRoleData(){
          getRoleList({pageNum:1,pageSize:1000}).then(response => {
            this.options = response.list;
          });
        },

        //显示离职弹窗
        showQuit(item){
            this.dialogVisible3 = true;
            this.quitForm.userId = item.userId;
            getStaffsList({pageNum:1,pageSize:1000}).then(response => {
                this.list2 = response.list.filter((el)=>{
                    return el.userId != item.userId
                });
            })
        },

        //关闭离职弹窗
        handleClose3(){
            this.dialogVisible3 = false;
            this.quitForm.target = 0;
        },

        //确认离职
        handleConfirm3(){
            this.btnLoading3 = true;
            delSellerItem(this.quitForm).then(()=>{
                this.btnLoading3 = false;
                this.handleClose3();
                this.getList();
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                })
            }).catch(()=>{
                this.btnLoading3 = false;
            })
        },



      //改变查看页数
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },

      //改变页码
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },

      //搜索
      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      /**
       *获取列表
       **/
      getList() {
        this.listLoading = true;
        let listQuery = JSON.parse(JSON.stringify(this.listQuery));
          getStaffsList(listQuery).then(response => {
          this.listLoading = false;
          this.list = response.list;
          this.total = response.count;
        });
      },
      //点击部门
      nodeClick4(){
        this.needNodes = JSON.parse(JSON.stringify(this.$refs.tree.getCheckedNodes(true)));
      },

      closeTag(index,type){
        let key = type == 1 ? 'tags' : 'tags'+type;
        let key2 = type == 1 ? 'userIdsText' : 'userIdsText'+type;
        this.employForm[key].splice(index,1);
        this.employForm[key2] = [];
        this.employForm[key].forEach((el)=>{
          this.employForm[key2].push(el.id)
        });
        this.employForm[key2] = this.employForm[key2].join(",")
      },

      //删除适用人群
      closeRQitem(index){
        this.needNodes.splice(index,1);
        this.$refs.tree.setCheckedNodes(this.needNodes);
      },

      //显示适用人群
      showChooseRQ(type){
        this.dialogVisible4 = true;
        this.popType = type;
        if(type == 1){
          this.needNodes = JSON.parse(JSON.stringify(this.employForm.tags));
        }else if(type == 2){
          this.needNodes = JSON.parse(JSON.stringify(this.employForm.tags2));
        }else if(type == 3){
          this.needNodes = JSON.parse(JSON.stringify(this.employForm.tags3));
        }else if(type == 4){
          this.needNodes = JSON.parse(JSON.stringify(this.employForm.tags4));
        }
         setTimeout(()=>{
           this.$refs.tree.setCheckedNodes(this.needNodes);
         },100)


      },


      //关闭适用人群
      handleClose4(){
        this.dialogVisible4 = false;
      },

      //确认适用人群
      handleConfirm4(){
        this.dialogVisible4 = false;
        let key = this.popType == 1 ? 'tags' : 'tags'+this.popType;
        let key2 = this.popType == 1 ? 'userIdsText' : 'userIdsText'+this.popType;
        this.employForm[key] = JSON.parse(JSON.stringify(this.needNodes));
        this.employForm[key2] = [];
        this.employForm[key].forEach((el)=>{
          this.employForm[key2].push(el.id)
        });
        this.employForm[key2] = this.employForm[key2].join(",")
      },


      //显示员工弹窗
      showDialog(type,item){
        this.dialogVisible2 = true;
        this.title2 = type == 'add' ? '新增员工' : '编辑员工';
        if (type == 'edit'){
            this.employForm.userId = item.userId;
            this.employForm.realName = item.realName;
            this.employForm.roleId = item.roleId;
            this.employForm.code = item.code;
            this.employForm.mobile = item.mobile;
            this.employForm.departmentId = item.departmentId;
            this.employForm.position = item.position;
            this.employForm.gender = item.gender;
            this.employForm.goodsLineIds = item.goodsLineIds != '' ? item.goodsLineIds.split(",") : [];
            this.employForm.purchaseGoodsSn = item.purchaseGoodsSn;
            this.employForm.purchaseGoodsClasses = item.purchaseGoodsClasses;
            this.employForm.purchaseAllGoodsClass = item.purchaseAllGoodsClass;
            this.employForm.isDepartManage = item.isDepartManage;
            this.employForm.masterId = item.masterId ? item.masterId : '';
            this.employForm.commissionType = item.commissionType ? item.commissionType : '';
            this.employForm.manageGoodsLineIds  = item.manageGoodsLineIds ;
            this.employForm.saleGoodsLineIds = item.saleGoodsLineIds;
          // this.employForm.tags = item.parentUsers;
            // this.employForm.tags2 = item.departUsers;
            // this.employForm.tags3 = item.relationUsers;
            // this.employForm.tags4 = item.relationParentUsers;
            this.employForm.isCanOuterVisit = item.isCanOuterVisit;
            // let key = '';
            // let key2 = '';
            //  for(let i = 1 ; i < 5 ; i++){
            //    key = i == 1 ? 'tags' : 'tags'+i;
            //    key2 = i == 1 ? 'userIdsText' : 'userIdsText'+i;
            //    this.employForm[key2] = [];
            //    this.employForm[key].forEach((el)=>{
            //      this.employForm[key2].push(el.id)
            //    });
            //    this.employForm[key2] = this.employForm[key2].length > 0 ? this.employForm[key2].join(",") : '';
            //  };
             console.log(this.employForm)
        }else{
            this.employForm = JSON.parse(JSON.stringify(defaultEmployForm));
        }
        this.isEdit = type;
      },

      //关闭员工弹窗之前
      beforeClose2(){
        this.dialogVisible2 = false;
        this.$refs.employForm.clearValidate();
      },

      //新增员工
      handleConfirm2(type,row){
        this.$refs.employForm.validate((valid) => {
          if (valid) {
              this.btnLoading2 = true;
            let data = JSON.parse(JSON.stringify(this.employForm));
            console.log("this.employForm",data)
            data.goodsLineIds = data.goodsLineIds.length > 0 ? data.goodsLineIds.join(",") : '';
            // data.parentUserIds = data.userIdsText.split(",");
            // data.departUserIds = data.userIdsText2.split(",");
            // data.relationUserIds = data.userIdsText3.split(",");
            // data.relationParentUserIds = data.userIdsText4.split(",");
              postStaffsEdit(data).then(response=>{
                this.btnLoading2 = false;
                this.dialogVisible2 = false;
                this.$refs.employForm.resetFields();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration:1000
                });
                this.getList()
              }).catch(()=>{
                  this.btnLoading2 = false;
              })
          }
        });
      },

      //关闭员工弹窗
      handleClose2(){
        this.dialogVisible2 = false;
        this.$refs.employForm.clearValidate();
      },



    }

  }
</script>

<style scoped lang="scss">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
    .el-tree-node__content{
      line-height: 30px;
    }
  }
  .table-product-line{
    border-top:1px solid rgb(238, 238, 238);
    border-left:1px solid rgb(238, 238, 238);
    td{
      border-bottom:1px solid rgb(238, 238, 238);
      border-right:1px solid rgb(238, 238, 238);
      line-height: 50px;
      height:50px;
      background: #fafafa;
    }

  }
</style>
